<script setup lang="ts">
const notifyList = [
  {
    key: 1,
    tab: '通知(4)',
    list: [
      {title: '您有一条新消息, 请立即查看1', subTitle: '您是否确定会见我...', time: '2022-11-15'},
      {title: '您有一条新消息2', subTitle: '您是否确定会见我...', time: '2022-11-15'},
      {title: '您有一条新消息3', subTitle: '您是否确定会见我...', time: '2022-11-15'},
      {title: '您有一条新消息4', subTitle: '您是否确定会见我...', time: '2022-11-15'}
    ]
  },
  {
    key: 2,
    tab: '消息(6)',
    list: [
      {title: '您有一条新消息ss', subTitle: '您是否确定会见我...', time: '2022-11-15'},
      {title: '您有一条新消息6', subTitle: '您是否确定会见我...', time: '2022-11-15'},
      {title: '您有一条新消息7', subTitle: '您是否确定会见我...', time: '2022-11-15'},
      {title: '您有一条新消息8', subTitle: '您是否确定会见我...', time: '2022-11-15'},
      {title: '您有一条新消息9', subTitle: '您是否确定会见我...', time: '2022-11-15'},
      {title: '您有一条新消息10', subTitle: '您是否确定会见我...', time: '2022-11-15'}
    ]
  },
  {
    key: 3,
    tab: '代办(2)',
    list: [
      {title: '您有一条新消息11', subTitle: '您是否确定会见我...', time: '2022-11-15 12:15:18'},
      {title: '您有一条新消息12', subTitle: '您是否确定会见我...', time: '2022-11-15 12:15:18'}
    ]
  }
]

function changePwd() {
  alert("您点击了修改密码")
}
</script>

<template>
  <DtTheme>
    <template #logo="data">
      <div class="flex justify-center flex-col items-center">
        <img class="w-2/4 rounded-full border-solid border-4 mt-4 border-gray-300" src="@assets/imgs/tx.jpeg"/>
        <span class="leading-10 text-xl text-gray-300 mb-5 font-semibold tracking-widest">引路人</span>
      </div>
    </template>

    <template #menuFooter="data">
      <a href="http://dt-blog.gitee.io/docs/" target="_blank"
         class="leading-6 border-t border-gray-700 block text-center opacity-70 py-3 px-2">直接打开文档</a>
    </template>

    <template #notifyBadge>
      <span
          class="absolute right-0 top-0 h-6 leading-4 bg-red-500 text-white text-lg rounded-2xl transform scale-50 px-1 flex items-center">12</span>
    </template>

    <template #notify="data">
      <ATabs centered :tabBarStyle="{
                flex: 1,
                margin: 0
            }">
        <ATabPane v-for="tab in notifyList" :key="tab.key" :tab="tab.tab">
          <ul class="notify__content">
            <li v-for="row in tab.list" class="transition-all">
              <p class="flex-1 flex flex-col text-left my-2">
                <span>{{ row.title }}</span>
                <span class="transform text-12 text-gray-400">{{ row.subTitle }}</span>
              </p>
              <p class="w-32 text-right opacity-80">{{ row.time }}</p>
            </li>
          </ul>

          <p class="btn-more">更多</p>
        </ATabPane>
      </ATabs>
    </template>

    <template #userInfo>
      <div @click="changePwd()"
           class="px-4 my-1 leading-9 flex border-gray-200 cursor-pointer hover:bg-gray-400 transition-all duration-300 text-13">
        <span v-icon="'ic:baseline-key'" class="pr-2" :size="16"></span>
        <span>修改密码</span>
      </div>
    </template>

    <template #icon>
      <img src="@assets/imgs/tx.jpeg"/>
    </template>
  </DtTheme>
</template>

<style scoped>

</style>
